<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8">搜索结果</h1>

    <!-- 搜索框 -->
    <div class="relative mb-8 max-w-2xl">
      <input
        v-model="searchQuery"
        @keyup.enter="handleSearch"
        type="text"
        placeholder="搜索新闻..."
        class="w-full py-3 px-4 pr-10 rounded-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg"
      >
      <button @click="handleSearch" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-blue-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </button>
    </div>

    <!-- 搜索结果 -->
    <div v-if="searchQuery" class="mb-12">
      <div class="mb-4 flex justify-between items-center">
        <h2 class="text-xl font-semibold">"{{ searchQuery }}" 的搜索结果 ({{ filteredNews.length }})</h2>
        <button 
          @click="clearSearch"
          class="text-sm text-gray-500 hover:text-red-500"
        >
          清除搜索
        </button>
      </div>

      <div v-if="filteredNews.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <NewsCard 
          v-for="item in filteredNews" 
          :key="item.id" 
          :news-item="item" 
          @toggle-favorite="toggleFavorite"
        />
      </div>

      <div v-else class="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <h3 class="text-xl font-medium text-gray-900 dark:text-white mb-2">未找到相关结果</h3>
        <p class="text-gray-500 dark:text-gray-400">尝试使用不同的关键词或浏览分类新闻</p>
      </div>
    </div>

    <!-- 搜索历史 -->
    <div v-else class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold mb-4">搜索历史</h2>
      <div v-if="searchHistory.length > 0" class="flex flex-wrap gap-2 mb-4">
        <div 
          v-for="(item, index) in searchHistory" 
          :key="index"
          class="px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-sm flex items-center cursor-pointer"
        >
          <span @click="searchQuery = item; handleSearch()">{{ item }}</span>
          <button 
            @click.stop="removeHistory(index)"
            class="ml-1 text-gray-400 hover:text-red-500"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
      <button 
        v-if="searchHistory.length > 0"
        @click="clearAllHistory"
        class="text-sm text-gray-500 hover:text-red-500"
      >
        清除全部历史
      </button>
      <div v-else class="text-center py-8 text-gray-500 dark:text-gray-400">
        暂无搜索历史
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useNewsStore } from '../store'
import { useFavoritesStore } from '../store'
import NewsCard from '../components/NewsCard.vue'

const route = useRoute()
const router = useRouter()
const newsStore = useNewsStore()
const favoritesStore = useFavoritesStore()
const searchQuery = ref('')
const { news, searchHistory, addSearchHistory } = newsStore
const { toggleFavorite } = favoritesStore

// 过滤搜索结果
const filteredNews = computed(() => {
  if (!searchQuery.value.trim()) return []
  const query = searchQuery.value.toLowerCase().trim()
  return news.filter(item => 
    item.title.toLowerCase().includes(query) || 
    item.summary.toLowerCase().includes(query) ||
    item.category.toLowerCase().includes(query)
  )
})

// 处理搜索
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    addSearchHistory(searchQuery.value.trim())
    router.push({ name: 'Search', query: { q: searchQuery.value.trim() } })
  }
}

// 清除搜索
const clearSearch = () => {
  searchQuery.value = ''
  router.push({ name: 'Search' })
}

// 移除单个搜索历史
const removeHistory = (index) => {
  searchHistory.splice(index, 1)
  localStorage.setItem('searchHistory', JSON.stringify(searchHistory))
}

// 清除所有搜索历史
const clearAllHistory = () => {
  searchHistory.length = 0
  localStorage.setItem('searchHistory', JSON.stringify(searchHistory))
}

// 初始化页面
onMounted(() => {
  if (route.query.q) {
    searchQuery.value = route.query.q
  }
})
</script>